<!-- Vue单文件组件的脚本部分，使用setup语法糖简化组件逻辑编写 -->
<script setup>
// 从Vue中导入ref和reactive函数，用于创建响应式数据
import { ref, reactive } from "vue";

// 创建响应式变量isBlue，布尔类型，初始值为false
// 用于控制背景颜色的动态切换
const isBlue = ref(false);

// 创建响应式变量blue，存储颜色值字符串'blue'
const blue = ref('blue');

// 创建响应式变量pink，存储颜色值字符串'pink'
const pink = ref('pink');

// 创建响应式变量width，存储宽度值'100%'
const width = ref('100%');

// 创建响应式变量height，存储高度数值40（后续会拼接'px'作为单位）
const height = ref('40');

// 使用reactive创建响应式对象myDiv，包含多个样式相关属性
// 用于整体绑定到元素的style上
const myDiv = reactive({
    backgroundColor: 'red',  // 背景色为红色
    width: '50px',           // 宽度为50px
    height: '20px'           // 高度为20px
})
</script>

<!-- 模板部分，定义组件的HTML结构，展示v-bind:style的多种用法 -->
<template>
    <!--
        外层div：使用对象语法绑定style
        语法说明：{ css属性: 绑定的值 }
        注意：CSS属性名在JS中使用驼峰式命名（如backgroundColor）
              或短横线命名（需用引号包裹，如'background-color'）

        具体绑定：
        - 'background-color': pink → 背景色绑定到pink变量（'pink'）
        - width: width → 宽度绑定到width变量（'100%'）
        - height: height + 'px' → 高度为height变量值（'40'）拼接'px' → '40px'
    -->
    <div v-bind:style="{ 'background-color': pink, width: width, height: height + 'px' }">

        <!--
            第一个子div：使用对象语法+三元表达式动态绑定样式
            - backgroundColor: isBlue ? blue : 'black'
              → 当isBlue为true时，背景色为blue变量值（'blue'）
              → 当isBlue为false时，背景色为'black'（当前状态）
            - 固定宽度50px，高度20px
        -->
        <div v-bind:style="{ backgroundColor: isBlue ? blue : 'black', width: '50px', height: '20px' }"></div>

        <!--
            第二个子div：直接绑定响应式对象myDiv
            myDiv包含backgroundColor、width、height三个样式属性
            等价于绑定 { backgroundColor: 'red', width: '50px', height: '20px' }
        -->
        <div v-bind:style="myDiv"></div>
    </div>
</template>

<!-- 样式部分，当前组件未定义额外样式，scoped表示样式仅作用于当前组件 -->
<style scoped>

</style>